<template>
	<div class="mainos">
		<div class="main_spac1 paddingBottom5">
			<div class="main_white padding10 paddingBottom20">
				<div class="main_crumbs boxdq">
					<div class="main_crumbs_l">
						<a href="javascript:;" @click="$router.back(-1)">
							<i class="el-icon-arrow-down"></i>返回
						</a>
						<em>|</em>
						<span>学校详情</span>
					</div>
				</div>
				<div v-loading="loading">
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em><span>学校详细信息</span></div>
					</div>
					<div class="main_xq">
						<el-descriptions :column="6" size="mini" border>
							<!-- <template slot="extra">
								<el-button type="primary" size="small">操作</el-button>
							</template> -->
							<!-- 学校名称 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校名称：
								</template>
								{{ form.name }}
							</el-descriptions-item>
							<!-- 学校负责人 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-mobile-phone"></i>
									学校负责人：
								</template>
								{{ form.manager_name }}
							</el-descriptions-item>
							<!-- 学校所在地 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-location-outline"></i>
									学校所在地：
								</template>
								{{ form.address }}
							</el-descriptions-item>
							<!-- 负责人电话 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-tickets"></i>
									负责人电话：
								</template>
								{{ form.mobile }}
								<!-- <el-tag size="small">学校</el-tag> -->
							</el-descriptions-item>
							<!-- 学校详细地址 -->
							<el-descriptions-item :span="4">
								<template slot="label">
									<i class="el-icon-office-building"></i>
									学校详细地址：
								</template>
								{{ form.address }}
							</el-descriptions-item>
							<!-- 学校创建时间 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校创建时间：
								</template>
								{{ form.created_at }}
							</el-descriptions-item>
							<!-- 学校状态 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校状态：
								</template>
								<el-tag size="small" type="danger" v-if="form.status == 0">冻结</el-tag>
								<el-tag size="small" type="success" v-else-if="form.status == 1">正常</el-tag>
							</el-descriptions-item>
							<!-- 审核结果 -->
							<el-descriptions-item :span="2">
								<template slot="label">
									<i class="el-icon-user"></i>
									审核结果：
								</template>
								<el-tag size="small" type="info" v-if="form.audit_status == 0">待审核</el-tag>
								<el-tag size="small" type="success" v-else-if="form.audit_status == 1">审核成功</el-tag>
								<el-tag size="small" type="danger" v-else-if="form.audit_status == 2">审核失败</el-tag>
							</el-descriptions-item>
							<!-- 学校logo -->
							<el-descriptions-item :span="3">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校logo：
								</template>
								<div v-for="(item, index) in log" :key="index">
									<img style="width: 100px; height: 67px;" :src="item.url" />
								</div>
							</el-descriptions-item>
							<!-- 学校资质 -->
							<el-descriptions-item :span="3">
								<template slot="label">
									<i class="el-icon-user"></i>
									学校资质：
								</template>
								<div v-for="(item, index) in qualifications " :key="index">
									<img style="width: 100px; height: 67px;" :src="item.url" />
								</div>
							</el-descriptions-item>
						</el-descriptions>
					</div>
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em><span>竞价排名</span></div>
					</div>
					<div class="main_table marginTop0 settlement">
						<el-table ref="sortTable" :data="tableData" border style="width: 100%" row-key="id">
							<el-table-column width="180" label="排名">
								<template slot-scope="scope">
									<span>{{ scope.$index + 1 }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="supplier_name" label="供应商名称">
							</el-table-column>
							<!-- <el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column> -->
							<el-table-column align="right">
								<template slot="header" slot-scope="scope">
									<el-button type="text" @click="ranking">竞价排序</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- <div class="main_tile boxdq marginTop20">
						<div class="main_tile_l marginLeft0"><em></em><span>广告管理</span></div>
					</div> -->

					<!-- <div class="main_tile boxdq marginTop20">
						<div class="main_tile_l marginLeft0"><em></em>生命周期</div>
					</div> -->
				</div>
			</div>

			<paid-listing :dialogVisible="dialogVisible" @close="closeDialog"></paid-listing>
		</div>
	</div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import PaidListing from '@/components/PaidListing'
import { myMixin } from "@/layout/mixin/drag"
import { openSchoolInfo, openBidding, changeBidding } from '@/api/order/orderList'
export default {
	mixins: [myMixin],
	components: {
		PaidListing
	},
	data() {
		return {
			loading: false,
			form: {},
			log: [],
			qualifications: [],

			// 竞价排名列表
			tableData: [],

			// 竞价排名模态框
			dialogVisible: false,
		}
	},
	mounted() {
		this.rowDrop();
	},
	created() {
		this.getList()
	},
	methods: {
		// 获取详细信息
		getSchoolInfo() {
			let data = {
				id: this.$route.params.id,
			}
			let query = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name, data)) +
						apiUrl().appsecret
					)
				},
				apiUrl().name,
				data
			);
			return new Promise((resolve, reject) => {
				openSchoolInfo(query).then(res => {
					if (res.errcode == 0) {
						resolve(res.data)
					} else {
						reject(res.errmsg)
					}
				})
			})
		},
		// 获取竞价排名
		getBuddingList() {
			let data = {
				school_id: this.$route.params.id,
			}
			let query = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name, data)) +
						apiUrl().appsecret
					)
				},
				apiUrl().name,
				data
			);
			return new Promise((resolve, reject) => {
				openBidding(query).then(res => {
					if (res.errcode == 0) {
						resolve(res.data)
					} else {
						reject(res.errmsg)
					}
				})
			})
		},
		getList() {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let getSchoolInfo = this.getSchoolInfo()
			let getBuddingList = this.getBuddingList()
			Promise.all([getSchoolInfo, getBuddingList]).then(res => {
				this.form = res[0]
				this.log = JSON.parse(res[0].logo)
				this.qualifications = res[0].qualifications
				this.tableData = res[1]
				loading.close();
			}).catch(e => {
				this.$message.error(e)
			})
		},
		// 竞价排名模态框
		ranking() {
			this.dialogVisible = true
		},
		// 关闭模态框
		closeDialog(e) {
			this.dialogVisible = e
		},

		// 修改竞价排名
		uploadTable(list) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let sortList = list.map((item, index) => {
				return {
					id: item.supplier_id,
					sort: index + 1
				}
			})
			let data = {
				school_id: this.$route.params.id,
				sort_data: JSON.stringify(sortList)
			}
			let query = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name, data)) +
						apiUrl().appsecret
					)
				},
				apiUrl().name,
				data
			);
			changeBidding(query).then(res => {
				if (res.errcode == 0) {
					this.$message.success(res.errmsg)
					this.getList()
				} else {
					this.$message.error(res.errmsg)
				}
			})
		}
	},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.tree {
	display: inline-block;
	overflow: hidden;
	width: 200px;
	height: 300px;
	border: 1px solid #444;
}

.mainos {
	.main_tile {
		.mainos_tile_r {
			color: $colour_red;
			font-size: $font_14;
		}
	}
}

/deep/.settlement .el-table tr {
	.set_default {
		display: none;
		margin-left: 10px;
	}
}

/deep/.settlement .el-table tr:hover {
	.set_default {
		display: inline-block;
		cursor: pointer;
	}
}

/deep/ .settlement .el-table--small td .cell {
	display: flex;
	align-items: center;
	height: auto;
}


/deep/.el-descriptions__header {
	display: none
}
</style>
